<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>服务器状态</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        canvas {
            width: 400px !important;
            height: 400px !important;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>
<body>
    <h1>服务器状态监控</h1>
    <div class="info">
        <h2>内存使用情况</h2>
        <canvas id="memChart" width="400" height="400"></canvas>
    </div>

</body>
</html>








<script type="text/javascript">
        $(document).ready(function () {
            var memChart = new Chart(document.getElementById('memChart'), {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [{
                        label: '内存使用率',
                        data: [],
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                max: 100
                            }
                        }]
                    }
                }
            });

            function updateMemChart() {
                $.ajax({
                    url: "http://127.0.0.1:5000/memory",
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        var pattern = /.*\((\d+\.\d+)\%\)/; // 匹配数字和百分号，并且提取数字部分
                        var memUsedPercent = parseFloat(data.msg.match(pattern)[1]);
                        var time = new Date();
                        console.log("123456:" + memUsedPercent);
                        memChart.data.labels.push(time.toLocaleTimeString());
                        memChart.data.datasets[0].data.push(memUsedPercent);
                         // 如果数据点数超过20个，则删除最早的数据点
                        if (memChart.data.labels.length > 20) {
                          memChart.data.labels.shift();
                          memChart.data.datasets[0].data.shift();
                        }
                        memChart.update();
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        alert("请求失败");
                    }
                });
            }

            setInterval(updateMemChart, 1000);
        });
    </script>
